<template>
	<div style="overflow: hidden;">
		<el-row :gutter="10">
			<el-col :span='6' v-if='initPicker.province'>
				<el-select placeholder="请选择" v-model='data.provinceVal' @change='handleProvince'>
					<el-option v-for='item in data.province' :key='item.PROVINCE_ID' :value="item.PROVINCE_CODE" :label='item.PROVINCE_NAME'></el-option>
				</el-select>
			</el-col>
			<el-col :span='6' v-if='initPicker.city'>
				<el-select placeholder="请选择" v-model='data.cityVal' @change='handleCity'>
					<el-option v-for='item in data.city' :key='item.CITY_ID' :value="item.CITY_CODE" :label='item.CITY_NAME'></el-option>
				</el-select>
			</el-col>
			<el-col :span='6' v-if='initPicker.area'>
				<el-select placeholder="请选择" v-model='data.areaVal' @change='handleArea'>
					<el-option v-for='item in data.area' :key='item.AREA_ID' :value="item.AREA_CODE" :label='item.AREA_NAME'></el-option>
				</el-select>
			</el-col>
			<el-col :span='6' v-if='initPicker.street'>
				<el-select placeholder="请选择" v-model='data.streetVal' @change='handleStreet'>
					<el-option v-for='item in data.street' :key='item.STREET_ID' :value="item.STREET_CODE" :label='item.STREET_NAME'></el-option>
				</el-select>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		cityPicker
	} from '@/api/news.js'
	import {
		reactive,
		onBeforeMount,
		watch
	} from '@vue/composition-api'
	import {
		cityPickers
	} from './cityPicker.js'
	export default {
		name: 'CityPicker',
		props: {
			cityPickerData: {
				type: Object,
				default: () => {}
			},
			cityPickerLevel: {
				type: Array,
				default: () => []
			}
		},
		setup(props, {
			emit
		}) {
			const {
				data,
				getGrovince,
				handleProvince,
				handleCity,
				handleArea,
				handleStreet,
				changeVal
			} = cityPickers()
			// data
			const initPicker = reactive({
				province: false,
				city: false,
				area: false,
				street: false
			})
			// methods
			const initPickerM = () => {
				if(props.cityPickerLevel.length<=0){
					for(let key in initPicker){
						initPicker[key] = true
					}
				}else {
				   props.cityPickerLevel.forEach(item=>{
					   initPicker[item] = true 
				   })
				}
			}

			watch([() => changeVal.areaVal, () => changeVal.cityVal, () => changeVal.provinceVal, () => changeVal.streetVal], () => {
				// 可以单独拿到里面的值，但是没必要
				emit('update:cityPickerData', changeVal)
			})


			onBeforeMount(() => {
				initPickerM()
				getGrovince()
			})
			return {
				data,
				initPicker,
				handleProvince,
				handleCity,
				handleArea,
				getGrovince,
				handleStreet
			}
		}
	}
</script>

<style>
</style>
